<div id="messages"></div>
<button id="tgl" onclick="toggle()">停止输出</button>
<script type="text/javascript">
    var source = new EventSource('/logcat/?app_package={{package}}');
    var i = 0;
    var stream = true;
    var div = document.getElementById("messages");
    source.onmessage = function (message) {
        if (stream) {
            // Grep package name
            if (!message.data.includes('{{package}}'))
                return;
            i = i + 1;
            // Display only last 500 lines
            if (i < 500) {
                div.innerHTML = div.innerHTML + html_safe(message.data) + "<br>";
            } else {
                div.innerHTML = html_safe(message.data) + "<br>";
                i = 0;
            }
            window.scrollTo(0, document.body.scrollHeight);
        }
    };

    function toggle() {
        var btn = document.getElementById("tgl");
        if (stream) {
            stream = false;
            btn.textContent = "Continue Streaming";
        } else {
            stream = true;
            btn.textContent = "Stop Streaming";
        }
    }

    function html_safe(data) {
        data = data.replace('b\'', '').replace(/\\r\\n\'/g, '').replace('b"', '').replace(/\\r\\n"/g, '')
        return data
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#x27;")
            .replace(/`/g, "&#x60;")
            .replace(/\(/g, "&#x28;")
            .replace(/\)/g, "&#x29;")
            .replace(/{/g, "&#x7B;")
            .replace(/}/g, "&#x7D;")
            .replace(/-/g, "&#x2D;")
            .replace(/\+/g, "&#x2B;");
    }

</script>